function collapsibleTree(dataTreeGraph) {
        var data = dataTreeGraph;
        var margin = {
                top: 20,
                right: 120,
                bottom: 20,
                left: 120
            },
            width = 1500 - margin.right - margin.left,
            height = 800 - margin.top - margin.bottom;

        var i = 0,
            duration = 750,
            root;

        var tree = d3.layout.tree()
            .size([height, width]);

        var diagonal = d3.svg.diagonal()
            .projection(function (d) {
                return [d.y, d.x];
            });

        var header = d3.select("body").append("div").attr("id", "treeGraph").attr("class","header");
        header.html("<a href='../index.html'><img src='../images/home_icon.png'></a> รายงานงบประมาณ มหาวิทยาลัยราชภัฏรำไพพรรณี <br/>");
        d3.select("#treeGraph").append("div").attr("id","navigator");
        
        var root = {"name":"งบประมาณ",
				"children":[{"name":"ปีงบประมาณ",
					"children":[{"name":"ประเภทงบประมาณ",
						"children":[{"name":"หน่วยงาน",
							"children":[{"name":"โครงการ"}]
						}]
					}]
				}]
        };
        
        navigator("navigator",root);
        
        var svg = d3.select("#treeGraph").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //d3.json("../XPD002Controller?graphType=tree",function(error,data){
        root = data;
        root.x0 = height / 2;
        root.y0 = 0;

        function collapse(d) {
            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }
        }

        root.children.forEach(collapse);
        update(root);
        //});//end d3.json

        d3.select(self.frameElement).style("height", "800px");

        function update(source) {

            // Compute the new tree layout.
            var nodes = tree.nodes(root).reverse(),
                links = tree.links(nodes);

            // Normalize for fixed-depth.
            nodes.forEach(function (d) {
                d.y = d.depth * 180;
            });

            // Update the nodes…
            var node = svg.selectAll("g.node")
                .data(nodes, function (d) {
                    return d.id || (d.id = ++i);
                });

            // Enter any new nodes at the parent's previous position.
            var nodeEnter = node.enter().append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    return "translate(" + source.y0 + "," + source.x0 + ")";
                })
                .on("click", click)
                .on("mouseover", mouseover)
                .on("mouseout", mouseout);

            nodeEnter.append("circle")
                .attr("r", 1e-6)
                .style("fill", function (d) {
                    return d._children ? "lightsteelblue" : "#fff";
                });

            nodeEnter.append("text")
                .attr("x", function (d) {
                    return d.children || d._children ? -10 : 10;
                })
                .attr("dy", ".35em")
                .attr("text-anchor", function (d) {
                    return d.children || d._children ? "end" : "start";
                })
                .text(function (d) {
                    return d.name;
                })
                .style("fill-opacity", 1e-6);

            // Transition nodes to their new position.
            var nodeUpdate = node.transition()
                .duration(duration)
                .attr("transform", function (d) {
                    return "translate(" + d.y + "," + d.x + ")";
                });

            nodeUpdate.select("circle")
                .attr("r", 4.5)
                .style("fill", function (d) {
                    return d._children ? "lightsteelblue" : "#fff";
                });

            nodeUpdate.select("text")
                .style("fill-opacity", 1);

            // Transition exiting nodes to the parent's new position.
            var nodeExit = node.exit().transition()
                .duration(duration)
                .attr("transform", function (d) {
                    return "translate(" + source.y + "," + source.x + ")";
                })
                .remove();

            nodeExit.select("circle")
                .attr("r", 1e-6);

            nodeExit.select("text")
                .style("fill-opacity", 1e-6);

            // Update the links…
            var link = svg.selectAll("path.link")
                .data(links, function (d) {
                    return d.target.id;
                });

            // Enter any new links at the parent's previous position.
            link.enter().insert("path", "g")
                .attr("class", "link")
                .attr("d", function (d) {
                    var o = {
                        x: source.x0,
                        y: source.y0
                    };
                    return diagonal({
                        source: o,
                        target: o
                    });
                });

            // Transition links to their new position.
            link.transition()
                .duration(duration)
                .attr("d", diagonal);

            // Transition exiting nodes to the parent's new position.
            link.exit().transition()
                .duration(duration)
                .attr("d", function (d) {
                    var o = {
                        x: source.x,
                        y: source.y
                    };
                    return diagonal({
                        source: o,
                        target: o
                    });
                })
                .remove();

            // Stash the old positions for transition.
            nodes.forEach(function (d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
            
            var max = Math.max.apply(Math,nodes.map(function(o){return o.depth;}));
            var navi = d3.select("#navigator").selectAll("g.node").selectAll("circle");
            navi.forEach(function(d,i){
            	if(i<=max){
            		d[0].style.fill = "rgb(176,196,222)";
            	} else{
            		d[0].style.fill = "rgb(255,255,255)";
            	}
            });
        }//end update

        // Toggle children on click.
        function click(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
        }

        // Toggle children on mouseover.
        var tip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 1e-6);

        function mouseover(d) {
            tip.transition().duration(500).style("opacity", 1);
            tip.html(d.name + "<br/> จำนวนเงิน: " + d.amount.toLocaleString("th-TH"))
                .style("left", (d3.event.pageX - 34) + "px")
                .style("top", (d3.event.pageY - 55) + "px");
        }

        function mouseout() {
            tip.transition().duration(500).style("opacity", 1e-6);
        }
} //end collapsibleTree